<template>
  <div>
    <div class="base-container">
      <p class="title">优惠券信息</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="优惠券名称：">{{ info.name }}</el-descriptions-item>
        <el-descriptions-item label="优惠券类型：">
          <div style="display: inline-block">
            <dict-tag :options="activity_coupon_type" :value="info.types"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="有效期：">{{ info.effectiveTime }}</el-descriptions-item>
        <el-descriptions-item label="优惠券状态：">
          <div style="display: inline-block">
            <dict-tag :options="activity_coupon_status" :value="info.useState"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item :label="info.types == 1 ? '储值金额：' : info.types == 2 ? '消费金额：' : '购买金额：'">{{ formatAmount(info.sillPrice) }}</el-descriptions-item>
        <el-descriptions-item v-if="info.types && info.types != 3" label="优惠金额：">{{ formatAmount(info.discountPrice) }}</el-descriptions-item>

        <el-descriptions-item label="发放数量：">{{ info.grantNum }}</el-descriptions-item>
        <!-- <el-descriptions-item label="个人限领数量：">{{ info.limitNum }}</el-descriptions-item> -->
        <el-descriptions-item label="已领取：">{{ info.receivedNum }}</el-descriptions-item>
        <el-descriptions-item label="待领取：">{{ info.unclaimedNum }}</el-descriptions-item>
        <el-descriptions-item label="已使用：">{{ info.useNum }}</el-descriptions-item>
        <el-descriptions-item :label="info.useState == 3 ? '已过期：' : '未使用：'" >{{ info.unUseNum }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="base-container mt-10px mb-50px">
      <el-tabs v-model="activeTab" @tab-change="tabChange">
        <el-tab-pane label="全部" :name="0"></el-tab-pane>
        <el-tab-pane label="自有APP" :name="1014"></el-tab-pane>
        <el-tab-pane label="微信小程序" :name="1012"></el-tab-pane>
        <el-tab-pane label="支付宝小程序" :name="1013"></el-tab-pane>
      </el-tabs>

      <el-form :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item label="使用状态" prop="state">
          <el-select clearable v-model="queryParams.state" class="w-200px" placeholder="请选择" @change="handleQuery">
            <el-option
              v-for="item in activity_coupon_use_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单编号" prop="outTradeNo">
          <el-input
            class="w-200px"
            v-model="queryParams.outTradeNo"
            placeholder="请输入订单编号"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['platuser:couponsDetail:export']">导出</el-button>
        </el-form-item>
      </el-form>

      <el-table class="mt-10px" border v-loading="loading" :data="list">
        <el-table-column label="优惠码" align="center" prop="juanCode" min-width="120" show-overflow-tooltip />
        <el-table-column label="用户编号" align="center" prop="platformUserId" min-width="120" show-overflow-tooltip />
        <el-table-column label="获取方式" align="center" prop="receiveType" min-width="100" />
        <el-table-column label="领取时间" align="center" prop="receiveTime" min-width="120" show-overflow-tooltip />
        <el-table-column label="使用状态" align="center" prop="state" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <dict-tag :options="activity_coupon_use_status" :value="scope.row.state" />
          </template>
        </el-table-column>
        <el-table-column label="使用时间" align="center" prop="useTime" min-width="120" show-overflow-tooltip />
        <el-table-column label="订单编号" align="center" prop="outTradeNo" min-width="120" show-overflow-tooltip />
      </el-table>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { getCouponReceivedRecord, getCouponReceivedDetail } from "@/api/activity/coupon"
const { proxy } = getCurrentInstance()
const { activity_coupon_type, activity_coupon_status, activity_coupon_use_status } = proxy.useDict('activity_coupon_type', 'activity_coupon_status', 'activity_coupon_use_status')

const route = useRoute()

const info = ref({})
const activeTab = ref(0)
const loading = ref(false)
const list = ref([])
const total = ref(1)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  juanId: route.params.id,
  channelCode: null,
  state: null,
  outTradeNo: null,
})

const getDetail = () => {
  getCouponReceivedDetail(route.params.id).then(res => {
    info.value = res.data
  })
}

const tabChange = () => {
  if (activeTab.value != 0) {
    queryParams.value.channelCode = activeTab.value
  } else {
    queryParams.value.channelCode = null
  }
  handleQuery()
}

const handleQuery = () => {
  queryParams.value.pageNum = 1
  getList()
}

const getList = () => {
  loading.value = true
  getCouponReceivedRecord(queryParams.value).then(response => {
    list.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('platuser/couponsDetail/export', {
    ...queryParams.value
  }, `优惠券领取明细_${proxy.getFileImportName()}.xlsx`)
}

getDetail()
getList()
</script>

<style lang="scss" scoped>
.w-200px {
  width: 200px;
}

.title {
  color: rgb(31, 31, 31);
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgb(225, 225, 225);
}

.descriptions {
  :deep(.el-descriptions__cell) {
    width: 33.33%
  }

  :deep(.el-descriptions__content) {
    word-break: break-all;
  }
}

:deep(.unpay) {
  color: #F64C4C !important;
}
</style>